<template>
<div class="addGoods">
   <el-row :gutter="20">
      <el-col :span="4">
        <div class="menu">
           <div class="title">产品类型列表</div>
           <div class="tree">
                <GoodsTree  @changeTree="changeTree" />
           </div>
        </div>
      </el-col>
      <el-col :span="20" style="padding-left:0;">
        <div class="content">
           <div class="subTitle">商品{{ title }}</div>
           <div class="wrapper">
              <el-form ref="goodsForm" :rules="rules" :model="goodsForm" label-width="80px">
                <el-form-item label="所属分类" prop="category">
                   {{  goodsForm.category  }}
                </el-form-item>
                <el-form-item label="商品名称" prop="title" size="small">
                  <el-input v-model="goodsForm.title"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price" size="small">
                  <el-input v-model="goodsForm.price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="num" size="small">
                  <el-input v-model="goodsForm.num"></el-input>
                </el-form-item>
                <el-form-item label="商品卖点" prop="sellPoint" size="small">
                  <el-input v-model="goodsForm.sellPoint"></el-input>
                </el-form-item>
                <el-form-item label="发布时间">
                  <el-col :span="11">
                     <el-form-item prop="date1">
                         <!-- v-model="goodsForm.date1"   -->
                         <el-date-picker  type="date" size="small" placeholder="选泽日期" 
                            :value="moment(goodsForm.date1,'YYYY-MM-DD')"
                            style="width:100%" @change="dateChange"></el-date-picker>
                     </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2" size="small" style="text-align:center;">-</el-col>
                  <el-col :span="11">
                     <el-form-item prop="date2">
                          <el-time-picker  type="date"  :value="moment(goodsForm.date2,'HH:mm:ss')"
                          size="small" placeholder="选泽时间" @change="windowIntimeChange"
                          style="width:100%;"></el-time-picker>
                     </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="商品图片" prop="image" size="small">
                  <UploadImg  @sendImg="sendImg" ref="uploadImg" :fileList="photoArr" />
                  <!-- <el-input v-model="goodsForm.image"></el-input> -->
                </el-form-item> 
                <el-form-item label="商品描述" prop="descs" size="small">
                   <WangEditor @sendWangEditor="sendWangEditor" ref="wangEditor" />
                </el-form-item> 
                <!-- <el-form-item label="活动时间">
                  <el-col :span="11">
                    <el-date-picker type="date" size="small" placeholder="选择日期" v-model="goodsForm.date1" style="width: 100%;"></el-date-picker>
                  </el-col>
                  <el-col class="line" :span="2" style="text-align:center;">-</el-col>
                  <el-col :span="11">
                    <el-time-picker placeholder="选择时间" size="small" v-model="goodsForm.date2" style="width: 100%;"></el-time-picker>
                  </el-col>
                </el-form-item> -->
                <el-form-item>
                  <el-button type="primary" v-show=" title != '详情' " @click="onSubmit('goodsForm')" size="small">保存</el-button>
                  <el-button type="primary" v-show=" title != '详情' " @click="resetForm('goodsForm')" size="small">重置</el-button>
                  <el-button size="small" @click="closePage">取消</el-button>
                </el-form-item>
              </el-form>
           </div>
        </div>
      </el-col>
  </el-row>
</div>
</template>
<script>
import moment from 'moment';
import dayjs from 'dayjs'  
import {  mapState } from 'vuex'
import GoodsTree from '@/views/GoodsManage/List/GoodsTree'
import UploadImg from '@/views/GoodsManage/List/UploadImg'
import WangEditor from '@/views/GoodsManage/List/WangEditor'
export default {
  name: "AddGoods",
  components:{
     GoodsTree,
     UploadImg,
     WangEditor,
  },
  computed:{
     ...mapState('product',['rowData','title'])
  },
  data() {
    return {
      photoArr:[],  // 图片的容器集合
      goodsForm:{
            id:'',
            cid:'',
            category:'',
            title:'',
            price:'',
            num:'',
            sellPoint:'',
            image:[],
            descs:'',
            date1:'',
            date2:'',
            // isBanner:true,  // 论推荐
            // recommend:true, // 推荐
            // shelves:true,  // 商品上架
          },
       rules: {
         title: [
            { required: true, message: '请输入商品名称', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入商品价格', trigger: 'change' }
          ],
          num: [
            { required: true, message: '请输入商品数量', trigger: 'change' }
          ],
          date1: [
            { type: 'string', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
          ],
        }
      }
    },
    mounted(){
       if(this.title === '编辑' || this.title === '详情'){
           // 赋值的 rowData 是一个新的对象 深拷贝  JSON.parse(JSON.stringify())
           //this.goodsForm = {...this.rowData};
           this.goodsForm = JSON.parse(JSON.stringify(this.rowData));
           let imgs = this.goodsForm.image;  // 字符串类型  dayjs(scope.row.created).format('YYYY年MM月DD日 HH:mm:ss')
           this.goodsForm.image = [String(imgs)]
           console.log('imgs999999',this.goodsForm.image);
           let createdTime = dayjs(this.rowData.created).format('YYYY-MM-DD HH:mm:ss')
           this.goodsForm.date1 = createdTime.slice(0,10)
           this.goodsForm.date2 = createdTime.slice(10,createdTime.length).trim();
           //let arr  = imgs.split('');
           this.photoArr.push({name:'',url:imgs})
          //  arr.forEach(ele=>{
          //     this.photoArr.push({name:'',url:ele})
          //  })
          this.$nextTick(()=>{
              this.$refs.wangEditor.html = this.rowData.descs;
          })
       }
    },
    methods: {
      moment,
      dateChange(date){
         if(date){
          this.goodsForm.date1 = date
          console.log('33333',date);
         }
      },
      windowIntimeChange(time, timeString){
         console.log('77777',time);
         this.goodsForm.date2 = timeString
      },
      // 接受上传图片的路径
      sendImg(val){
         console.log('val777',val);
         this.goodsForm.image.push(val)
      },
      // 获取富文本编译的数据
      sendWangEditor(val){
         console.log('7888888',val);
         this.goodsForm.descs = val;
      },
      // 取消
      closePage(){
          this.$router.push('/goods/list')
      },
      // 保存
      onSubmit(fromName) {
        this.$refs[fromName].validate(valid=>{
           let {id,title,image,sellPoint,price,cid,category,num,descs} = this.goodsForm
           if(valid){
              if(this.title === '添加'){   
                 this.insertTbItem({title,image:JSON.stringify(image),sellPoint,price,cid,category,num,descs})
              }else{
                 this.updateTbItem({id,title,image:JSON.stringify(image),sellPoint,price,cid,category,num,descs})
              }
           }else{
              return false;
           }
        })
      },
      // 修改商品
      async updateTbItem(params){
         let res = await this.$api.updateTbItem(params);
         if(res.data.status ===200){
             this.$message({
                message:'恭喜你,修改商品成功',
                type:'success',
             })
             // 跳转路由
             this.$router.push('/goods/list')
          }
      },
      // 添加商品
      async insertTbItem(){
          let res = await this.$api.insertTbItem(params);
          if(res.data.status ===200){
             this.$message({
                message:'恭喜你,添加商品成功',
                type:'success',
             })
             // 跳转路由
             this.$router.push('/goods/list')
          }
      },
      // 重置
      resetForm(fromName){
         if(this.title === '添加'){
           this.$refs[fromName].resetFields();
           this.$refs.uploadImg.clear();
           //this.$refs.wangEditor.html = ''
           this.$refs.wangEditor.editor.clear();
         }else{
           // 编辑页面  点击重置
           let rowData = JSON.parse(JSON.stringify(this.rowData));
           this.goodsForm = rowData;
           let imgs = rowData.image;
           this.goodsForm.image = [String(imgs)]
           let createdTime = dayjs(rowData.created).format('YYYY-MM-DD HH:mm:ss')
           this.goodsForm.date1 = createdTime.slice(0,10)
           this.goodsForm.date2 = createdTime.slice(10,createdTime.length).trim();
           this.photoArr = [];
           this.photoArr.push({name:'',url:imgs})
           this.$nextTick(()=>{
              this.$refs.wangEditor.html = this.rowData.descs;
           })
         }
      },
      changeTree(val){
         console.log('11',val);
         this.goodsForm.cid = val.cid
         this.goodsForm.category = val.name
      }
    }
}
</script>

<style lang="less" scoped>
.addGoods{
  padding:10px;
}
.menu{
    border:1px solid #ddd;
    background: #fff;
    height:1216px;
   .title{
      height:50px;
      line-height:50px;
      color:#fff;
      background:skyblue;
      text-align: center;
      padding-left:10px;
      font-size:14px;
   }
}
  .content{
      background: #fff;
      font-size:14px;
      .subTitle{
        background: #eee;
        padding:10px;
        color:#000;
        font-weight:700;
      }
      .wrapper{
         padding:10px;
      }
   }

   .el-form-item__content div{
       padding-left:0!important;
       padding-right:0!important;
   }

</style>